<template>
	<view class="top">
		<image class="top_img" :src="img" mode="widthFix"></image>
	</view>
	<view class="label">
		<template v-for="item in labelArr" :key="item">
			<view class="label_item">{{item}}</view>
		</template>
	</view>
	<view class="msg">
		<view class="msg_top">
			<image class="msg_top_portrait" :src="msg.portrait" mode="widthFix"></image>
			<text class="msg_top_author">{{msg.author}}</text>
		</view>
		<view class="msg_content">
			<view>绘本介绍：</view>
			<text class="msg_content_introduce">{{msg.introduce}}</text>
		</view>
	</view>
	<view class="list">
		<template v-for="item in isOpen?listArr:listArr.slice(0,6)" :key="item.id">
			<view class="list_item">
				<image class="list_item_img" :src="item.img" mode="widthFix"></image>
				<view class="list_item_set">第{{item.set}}课</view>
				<view class="list_item_title">{{item.title}}</view>
			</view>
		</template>
	</view>
	<view v-if="listArr.length>6" class="list_open" @click="isOpen=!isOpen">
		{{isOpen?'收起':'展开更多'}}<text class="iconfont"
			:class="isOpen?'icon-shuangjiantou-shang':'icon-shuangjiantou-xia'"></text>
	</view>
	<view class="bottom">
		<view class="bottom_price">
			{{money.price}}元
		</view>
		<view class="bottom_original">
			原价：{{money.original}}元
		</view>
		<view class="bottom_buy" @click="goToPictureBook">
			立即购买
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pid: '',
				img: "/static/shop-1.jpg",
				labelArr: ['国学', '2-4岁', '男孩'],
				msg: {
					portrait: "/static/Luffy.jpg",
					author: '作者',
					introduce: '正文内容绘本介绍正文内容绘本介绍正文内容绘本介绍正文内容绘本介绍正文内容绘本介绍正文内容绘本介绍正文内容绘本介绍'
				},
				isOpen: false,
				listArr: [{
						id: 1,
						img: '/static/Luffy.jpg',
						set: 1,
						title: '猴王出生'
					},
					{
						id: 2,
						img: '/static/Luffy.jpg',
						set: 2,
						title: '猴王出生'
					},
					{
						id: 3,
						img: '/static/Luffy.jpg',
						set: 3,
						title: '猴王出生'
					},
					{
						id: 4,
						img: '/static/Luffy.jpg',
						set: 4,
						title: '猴王出生'
					},
					{
						id: 5,
						img: '/static/Luffy.jpg',
						set: 5,
						title: '猴王出生'
					},
					{
						id: 6,
						img: '/static/Luffy.jpg',
						set: 6,
						title: '猴王出生'
					},
					{
						id: 7,
						img: '/static/Luffy.jpg',
						set: 7,
						title: '猴王出生'
					}
				],
				money: {
					price: '168.00',
					original: '198.00'
				}
			}
		},
		methods: {
			// 付款页面
			goToPictureBook() {
				uni.navigateTo({
					url: '/subpkg/place-order/place-order?id=' + this.pid
				});
			}
		},
		onLoad(option) {
			console.log(option);
			this.pid = option.id
		}
	}
</script>

<style scoped>
	.top_img {
		width: 100%;
	}

	.label_item {
		display: inline-block;
		padding: 5px 30px;
		margin: 5px;
		border-radius: 5px;
		background-color: black;
		color: white;
	}

	.msg_top {
		display: flex;
		align-items: center;
	}

	.msg_top_portrait {
		width: 50px;
		border-radius: 25px;
		margin: 20px;
	}

	.msg_top_author {
		font-weight: 800;
		font-size: 18px;
	}

	.msg_content {
		margin: 0 20px;
	}

	.msg_content_introduce {
		display: block;
		text-indent: 56rpx;
	}

	.list {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		padding-top: 20px;
		margin-top: 20px;
		border-top: 1px solid #797979;
	}

	.list_item {
		width: 30%;
		text-align: center;
		margin-bottom: 10px;
	}

	.list_item_img {
		width: 100%;
	}

	.list_item_set {
		font-size: 13px;
	}

	.list_item_title {
		font-weight: 800;
	}

	.list_open {
		text-align: center;
		color: #0066ff;
	}

	.bottom {
		height: 40px;
		line-height: 40px;
		margin: 20px 0;
		display: flex;
		text-align: center;
	}

	.bottom_price {
		color: #ff0000;
		font-weight: 800;
		width: 33.333333%;
	}

	.bottom_original {
		width: 33.333333%;
	}

	.bottom_buy {
		width: 33.333333%;
		background-color: #ff0000;
		border-radius: 5px;
		color: white;
	}
</style>
